<template>
    <view>
        <u-navbar title="搜索" :background="background" back-icon-color="#efefef" title-color="#efefef"></u-navbar>
        <view class="wrap">
            <view class="search">
                <view class="searchInput">
                    <!-- <u-input v-model="value" type="text" border="true" placeholder-style="color: #555555"/> -->
                    <u-search :show-action="false" action-text="搜索" :animation="true" bg-color="#fffaf0" shape="square" v-model="searchWord" @search="search()">
                    </u-search>
                </view>
            </view>
            <view class="nosearch" v-if="forumList.length==0">
                暂无数据
            </view>
            <view v-for="item in forumList" :key="item.id">
                <view class="f-main" @click="goMain(item.id,item.forumTitle)">
                    <view class="f-title">{{ item.forumTitle }}</view>
                    <view class="box">
                        <view class="Grid-cell u-1of3">
                            <u-icon :label="item.landlord" label-color="#626768" size="25" name="/static/icon/my.png">
                            </u-icon>
                        </view>
                        <view class="Grid-cell right-to">
                            <u-icon :label="item.updateTime" label-color="#626768" size="30"
                                name="/static/icon/time.png"></u-icon>
                        </view>
                        <view class="Grid-cell u-1of7 ">
                            <u-icon :label="item.commentNumber" label-color="#626768" size="30"
                                name="/static/icon/reply.png"></u-icon>
                        </view>
                    </view>
                    <u-line color="black" />
                </view>
            </view>

        </view>
    </view>
</template>

<script>
    import { getForums, selectForumByWord } from "@/api/data.js"
    export default {

        data() {
            return {
                background: {
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                },
                forumList:[],
                searchWord: ''
            }
        },
        onLoad(options) {
            this.searchWord=options.searchword
        },
        onShow() {
            // this.getForums()
            this.search()
        },
        methods:{
            getForums(){
                const _this=this
                getForums().then(function(res){
                    // console.log(res.data)
                    _this.forumList=res.data.data
                })
            },
            search(){
                const _this=this
                console.log(this.searchWord)
                selectForumByWord({
                    word: this.searchWord
                }).then(function(res){
                    _this.forumList=res.data.data
                })
            },
            goMain(id,title){
                
                
                
                // console.log(this.userInfo)
                // console.log("sd")
                uni.navigateTo({
                    url: '/pages/forum/main/index?id='+id+'&title='+title
                })
                // uni.navigateTo({
                //                 url: '/pages/articles/index',
                //             })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        background-color: #fffaf0;
        // background-color: #fff9ee;
    }

    .search {
        background-color: #333333;

        .searchInput {
            width: 95%;
            margin: 10rpx auto;
            // background-color: #b1b1b1;
        }
    }
    .box {
        display: flex;
        padding: 20rpx 0;
        color: #626768;
    }
    .f-title {
        width: 100%;
        font-size: 38rpx;
        padding: 25rpx 0 10rpx;
        letter-spacing: 2rpx;
        color: #2C405A;
    }

    .f-main {
        padding: 0 40rpx;
    }

    .Grid-cell {
        flex: 1;
        // padding: 20rpx 0;
    }

    .Grid-cell.u-full {
        flex: 0 0 100%;
        // background-color: #007AFF;
    }

    .Grid-cell.u-1of2 {
        flex: 0 0 50%;
        // background-color: #3F536E;
    }

    .Grid-cell.u-1of3 {
        flex: 0 0 33.3333%;
        // background-color: #ffff00;
    }

    .Grid-cell.u-1of4 {
        flex: 0 0 25%;
        // background-color: #55007f;
    }

    .Grid-cell.u-1of5 {
        flex: 0 0 20%;
        // background-color: #55007f;
    }

    .Grid-cell.u-1of7 {
        flex: 0 0 15%;
        // background-color: #55007f;
    }

    .right-to {
        // margin-left:auto;
        text-align: right;
        margin-right: 20rpx;
    }
    .nosearch {
        // margin-top: 200rpx;
        font-size: 50rpx;
        margin: 200rpx auto;
        color: #3F536E;
    }
</style>
